<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>Aplic. Web de jQuery Mobile</title>

<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">


  <!-- Home screen icon  Mathias Bynens mathiasbynens.be/notes/touch-icons -->
  <!-- For iPhone 4 with high-resolution Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png">
  <!-- For first-generation iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png">
  <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
  <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png">
  <!-- For nokia devices: -->
  <link rel="shortcut icon" href="img/l/apple-touch-icon.png">
  


<!--<link rel="stylesheet" href="css/SanCayetano.min.css">-->
<link href='http://fonts.googleapis.com/css?family=Aldrich' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css" />
<link rel="stylesheet" href="css/SanCayetano.css">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
<script src="phonegap.js"></script>
<script src="js/script.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/jquery.mobile.iscrollview.js"></script>-->
<!-- aqui linkamos la api de google para la lectura de feeds -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!--<script src="js/plugins.js"></script>-->


 <script>    
        // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        // Empty
    }

    // alert dialog dismissed
    function alertDismissed() {
        // do something
    }

    // Show a custom alert
    //
    function showAlert() {
        navigator.notification.alert(
            'You are the winner!',  // message
            alertDismissed,         // callback
            'Game Over',            // title
            'Done'                  // buttonName
        );
    }
</script>

<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(39.575403,2.623769); 
    var myOptions = {
      zoom: 17,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

$('#contacto').live( 'pageinit',function(event){ initialize() });

</script>

</head> 
<body> 
	

<div data-role="page" id="page">

	<div  data-role="header" class="ui-state-persist" data-id="persistent" data-position="fixed">
	<div  id="header" >
      <div class="raya"></div>
     
	</div>
  	<div class="header-logo" data-role="header" data-position="fixed"></div>
   <div class="menuDesplegable">
    <div class="dropdown" id="dropdownHome">
   		<div class="rayaMenuArriba"></div>
    	<ul  class="listaMenu" data-role="listview" data-theme="a" data-icon="false">
        	
            <li  data-icon="false" class="lineaMenu">
            	<a href="#noticiasPage" data-transition="slideup">
                    	<img alt="" src="css/images/menu/noticias.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Noticias</div>
                </a>
            
            </li>
            <li data-icon="false" class="lineaMenu">
            	<a href="calendario.html" rel="external">
                    	<img alt="" src="css/images/menu/calendario.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Calendario</div>
                </a>
            
            </li>
            <li data-icon="false" class="lineaMenu">
            	<a href="galeria.html" rel="external">
                    	<img alt="" src="css/images/menu/galeria.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Galeria</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="#youtube" data-transition="slideup">
                    	<img alt="" src="css/images/menu/youtube.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">YouTube</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="comida.html" rel="external">
                    	<img alt="" src="css/images/menu/menu.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Menu</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="#contacto" data-transition="slideup" id="#menuContacto" onClck="javascript:initialize()">
                    	<img alt="" src="css/images/menu/contacto.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Contacto</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="ajustes.html" rel="external">
                    	<img alt="" src="css/images/menu/ajustes.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Ajustes</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="alertas.html" rel="external">
                    	<img alt="" src="css/images/menu/alertas.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Alertas</div>
                </a>
            
            </li>
            
		</ul>
        <div class="rayaMenuAbajo"></div>
    </div>
     <div class="menu" id="menuD" onClick="mostrar('dropdownHome')"><span>Menu</span><span class="menuArrow"></span></div>
     </div>
    </div>

	<div data-role="content" class="contenido">
    <!--aqui metemos el popup del video -->
    <!--<div style="margin-top:50px">
 		<p>This will result in the following popup:</p>
		<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true">Open Popup</a>
		
		<div data-role="popup" id="popupBasic">
			<p>This is a completely basic popup, no options set.</p>
		</div>

        
    </div>-->
    
    	<div id="wrapper">
			<div id="scroller">
            	
            
            
            </div>
            	
        </div>
	</div>
 
	<div id="wrapper_2">
    <div id="scroller">
      <div class=" instalacion">
            <div class="itemInstalacion" id="presentacion" onClick="seleccionarItem(this.id)">
            	<span id="presentacion_span" class="textoIcoSeleccionado">Presentacion</span>
                <div class="ico"><img id="presentacion_imagen" src="css/images/submenu/icono_presentacion_blanco.png" width="36" height="21"></div>
            </div>
            <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="escoleta">
            <span id="escoleta_span" class="textoIco">Escoleta</span>
            <div class="ico"><img id="escoleta_imagen" src="css/images/submenu/icono_escoleta_azul.png" width="20"></div>
            </div>
            <div onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="infantil">
            <span id="infantil_span"  class="textoIco">Infantil</span>
            <div class="ico"><img id="infantil_imagen" src="css/images/submenu/icono_infantil_azul.png"  height="25"></div>
            </div>
             <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="primaria"><span id="primaria_span" class="textoIco">Primaria</span>
             <div class="ico"><img id="primaria_imagen" src="css/images/submenu/icono_primaria_azul.png"  height="31"></div>
             </div>
              <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="eso"><span id="eso_span" class="textoIco">ESO</span>
              <div class="ico"><img id="eso_imagen" src="css/images/submenu/icono_eso_azul.png"  height="30"></div>
              </div>
              
               <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="bac"><span id="bac_span" class="textoIco">BAC</span>
              <div class="ico"><img id="bac_imagen" src="css/images/submenu/icono_bac_azul.png" width="36" height="21"></div>
              </div>
              
               <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="claustro"><span id="claustro_span" class="textoIco">Claustro</span>
              <div class="ico"><img id="claustro_imagen" src="css/images/submenu/icono_claustro_azul.png" width="26" ></div>
              </div>
              
              <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="capilla"><span id="capilla_span" class="textoIco">Capilla</span>
              <div class="ico"><img id="capilla_imagen" src="css/images/submenu/icono_capilla_azul.png" width="26" ></div>
              </div>
              
              <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="futbol"><span id="futbol_span" class="textoIco">Futbol</span>
              <div class="ico"><img id="futbol_imagen" src="css/images/submenu/icono_futbol_azul.png" width="20" ></div>
              </div>
              
              <div  onClick="seleccionarItem(this.id)" class="itemInstalacion mt15" id="tenis"><span id="tenis_span" class="textoIco">Tenis</span>
              <div class="ico"><img id="tenis_imagen" src="css/images/submenu/icono_tenis_azul.png" width="26" ></div>
              </div>
              
              </div>
               
			</div>
    </div>
    
    
        
	<div data-role="footer" id="footer" data-position="fixed">
    
     
         <div class="conocenos">
        	<span class="icoCamara"></span>
        	<div class="textoPeq textoAlignConoce">Conoce nuestras Instalaciones</div>
        </div>
      
     
        
       
        
       
        
     </div>
     
     
  
      
        
</div>

<!-- aqui empieza el código de noticias -->

<div data-role="page" data-theme="a" id="noticiasPage">

	<div  data-role="header" class="ui-state-persist" data-id="persistent" data-position="fixed">
	<div  id="header" >
      <div class="raya"></div>
     
	</div>
  	<div class="header-logo" data-role="header" data-position="fixed"></div>
   <div class="menuDesplegable">
    <div class="dropdown" id="dropdownNoticias">
   		<div class="rayaMenuArriba"></div>
    	<ul  class="listaMenu" data-role="listview" data-theme="a" data-icon="false">
        	
            <li  data-icon="false" class="lineaMenu">
            	<a href="#noticiasPage" data-transition="slideup">
                    	<img alt="" src="css/images/menu/noticias.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Noticias</div>
                </a>
            
            </li>
            <li data-icon="false" class="lineaMenu">
            	<a href="calendario.html" rel="external">
                    	<img alt="" src="css/images/menu/calendario.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Calendario</div>
                </a>
            
            </li>
            <li data-icon="false" class="lineaMenu">
            	<a href="galeria.html" rel="external">
                    	<img alt="" src="css/images/menu/galeria.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Galeria</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="#youtube" data-transition="slideup">
                    	<img alt="" src="css/images/menu/youtube.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">YouTube</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="comida.html" rel="external">
                    	<img alt="" src="css/images/menu/menu.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Menu</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="maps.html" rel="external">
                    	<img alt="" src="css/images/menu/contacto.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Contacto</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="ajustes.html" rel="external">
                    	<img alt="" src="css/images/menu/ajustes.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Ajustes</div>
                </a>
            
            </li>
            
            <li data-icon="false" class="lineaMenu">
            	<a href="alertas.html" rel="external">
                    	<img alt="" src="css/images/menu/alertas.png" style="width: 40px; height: 40px" />
                 		<div class="textoIcono">Alertas</div>
                </a>
            
            </li>
            
		</ul>
        <div class="rayaMenuAbajo"></div>
    </div>
     <div class="menu" id="menuD" onClick="mostrar('dropdownNoticias')"><span>Menu</span><span class="menuArrow"></span></div>
     </div>
    </div>
	
	<div data-role="content">
    
    			<div id="status"></div>
                <div class="imagenCabecera"><img id="imagenFondo" src="css/images/slider/fondo_1.jpg" width="600"></div> 
           		<div id="listaAltura">
                    <ul  id="linksList" data-role="listview"  data-inset="false" >
                    
                    </ul>
                </div>
    </div><!-- /content -->	
	
	<div data-role="footer" id="foooter" data-position="fixed">		
	
</div><!-- /footer -->
    
	</div>
	
  	
    
    
	<div data-role="page" id="contentPage">

    <div data-role="header" data-position="fixed">
        <a href="#noticiasPage" data-rel="back">volver</a>
        <h1></h1>
    </div>
    
   

                <div data-role="content" id="entryText">
                	
                </div>
        
			
        <div data-role="footer" id="footer" data-position="fixed">
    
     
        
      </div>
    </div>

<div data-role="page" id="contacto" onload="initialize()" style="height:100%">

<!-- Código de la página de contacto -->
	<a href="tel:+34971220575" data-role="button">Llamar</a>
	<a href="mail.html" data-role="button" data-transition="slide" rel="external">Mandar correo</a>
  <div id="map_canvas"></div>


</div>

</body>
</html>
